1. ROTATEX - Rotacija oko X ose

3D Osnovno

Što je?

rotateX() rotira element oko horizontalne ose (X osa), što stvara efekt kako da element "pada" prema ili od vas.

Sintaksa:

transform: rotateX(angle);
  • angle: Kut rotacije (deg, rad, turn)
  • Pozitivan kut: Element pada prema dolje (od vas)
  • Negativan kut: Element pada prema gore (k vama)
  • 90deg / -90deg: Element je u potpunosti okomit
  • perspective: POTREBNA za vidjeti 3D efekt!
⚠️ Važno: Za 3D transformacije trebate perspective svojstvo na parent elementu!

Primjer 1: rotateX(45deg)

45°
transform: rotateX(45deg);

Primjer 2: rotateX(75deg)

75°
transform: rotateX(75deg);

Primjer 3: rotateX(-55deg)

-55°
transform: rotateX(-55deg);

2. ROTATEY - Rotacija oko Y ose

3D Osnovno

Što je?

rotateY() rotira element oko vertikalne ose (Y osa), što stvara efekt kao da se element okreće lije-desno.

Sintaksa:

transform: rotateY(angle);
  • angle: Kut rotacije (deg, rad, turn)
  • Pozitivan kut: Element se okreće desno (od vas)
  • Negativan kut: Element se okreće lijevo (k vama)
  • 90deg / -90deg: Element je u potpunosti okomit
  • Često se koristi za: Efekt flip kartice, 3D galerije

Primjer 1: rotateY(45deg)

45°
transform: rotateY(45deg);

Primjer 2: rotateY(60deg)

60°
transform: rotateY(60deg);

Primjer 3: rotateY(-70deg)

-70°
transform: rotateY(-70deg);

3. ROTATEZ - Rotacija oko Z ose

3D Osnovno

Što je?

rotateZ() rotira element oko dubine (Z osa), što je kao obična 2D rotacija. Efekt je sličan kao code rotaciji kroz ekran.

Sintaksa:

transform: rotateZ(angle);
  • angle: Kut rotacije (deg, rad, turn)
  • Pozitivan kut: Rotacija u smjeru kazaljke na satu
  • Negativan kut: Rotacija suprotno od smjera kazaljke
  • Napomena: Ovo je 2D rotacija, ali se koristi u 3D kontekstu
  • Često se koristi za: Rotacija kombinovana sa drugim 3D transformacijama

Primjer 1: rotateZ(45deg)

45°
transform: rotateZ(45deg);

Primjer 2: rotateZ(90deg)

90°
transform: rotateZ(90deg);

Primjer 3: rotateZ(-60deg)

-60°
transform: rotateZ(-60deg);

4. TRANSLATEZ - Pomjeranje u dubinu

3D Dubina

Što je?

translateZ() pomjera element duž Z ose (dubina), čini se da ide prema vama ili od vas. Mora se koristiti sa perspective!

Sintaksa:

transform: translateZ(distance);
  • distance: Pomjeranje u px, em, rem (obično px)
  • Pozitivna vrijednost: Element dolazi prema vama (veći)
  • Negativna vrijednost: Element ide od vas (manji)
  • perspective: Potrebna je na parent elementu!
  • Napomena: Nema vidljivog efekta bez perspective!

Primjer 1: translateZ(100px)

+100px
transform: translateZ(100px);

Primjer 2: translateZ(200px)

+200px
transform: translateZ(200px);

Primjer 3: translateZ(-150px)

-150px
transform: translateZ(-150px);

5. SCALEZ - Skaliranje u dubinu

3D Veličina

Što je?

scaleZ() skalira element na Z osi (dubina). Direktno se ne vidi kao vizualni efekt jer element nema debljine, ali utječe na 3D transformacije djece.

Sintaksa:

transform: scaleZ(value);
  • value: Faktor skaliranja (broj)
  • 1 = 100% (originalna veličina)
  • > 1 = uvećanje (1.5 = 150%)
  • < 1 = smanjenje (0.5 = 50%)
  • Često se koristi sa: rotateX() ili rotateY() da se vidi efekt

Primjer 1: scaleZ(1.5) + rotateX

1.5x
transform: scaleZ(1.5) rotateX(45deg);

Primjer 2: scaleZ(2) + rotateX

2x
transform: scaleZ(2) rotateX(45deg);

Primjer 3: scaleZ(0.5) + rotateX

0.5x
transform: scaleZ(0.5) rotateX(45deg);

6. PERSPECTIVE - Dubina Vida

Napredne

Što je?

perspective svojstvo kontrolira dubinu 3D efekta. Manji broj = veći 3D efekt (bliži je gledač), veći broj = manji efekt (dalje je gledač).

Sintaksa:

perspective: distance;
  • distance: Udaljenost u px (obično 500px - 1200px)
  • 500px: Veoma dramatiči 3D efekt (gledač je blizu)
  • 1000px: Normalan 3D efekt (neutralna udaljenost)
  • 2000px+: Blagi 3D efekt (gledač je daleko)
  • perspective-origin: Gdje je gledač pozicioniran

perspective: 400px

Blizu
perspective: 400px;

perspective: 1000px

Normalno
perspective: 1000px;

perspective: 2000px

Daleko
perspective: 2000px;

7. TRANSFORM-ORIGIN 3D - Točka Rotacije

Napredne

Što je?

transform-origin u 3D-u se koristi sa tri vrijednosti (X, Y, Z) za određivanje točke oko koje se element transformira.

Sintaksa:

transform-origin: X Y Z;
  • X: Horizontalno (left, center, right, %, px)
  • Y: Vertikalno (top, center, bottom, %, px)
  • Z: Dubina (samo brojevi, px)
  • Primjer: transform-origin: center center 50px;
  • Primjer: transform-origin: 50% 50% 100px;

Origin: center center (default)

Center
transform-origin: center center;
transform: rotateY(45deg);

Origin: left center

Lijevo
transform-origin: left center;
transform: rotateY(45deg);

Origin: right center

Desno
transform-origin: right center;
transform: rotateY(45deg);

8. KOMBINOVANE 3D TRANSFORMACIJE

Napredne

Što je?

Možete kombinovati više 3D transformacija za stvaranje kompleksnih efekata. Redoslijed je VEOMA bitan!

Sintaksa:

transform: rotateX() rotateY() rotateZ() translateZ() scale();
  • Redoslijed se izvršava slijeva nadesno
  • Svaka transformacija utječe na sljedeću
  • Primjer: rotateX(30deg) rotateY(45deg) translateZ(100px)
  • Često se koristi sa animations za 3D animacije

rotateX(30deg) rotateY(45deg)

XY
transform: rotateX(30deg) rotateY(45deg);

rotateX(40deg) rotateY(40deg) rotateZ(20deg)

XYZ
transform: rotateX(40deg) rotateY(40deg) rotateZ(20deg);

Kompleksna kombinacija

3D
transform: rotateX(35deg) rotateY(50deg) translateZ(50px) scale(1.1);

9. PRAKTIČNI PRIMJERI - 3D Animacije i Efekti

Primjena

Kako koristiti 3D transformacije u praksi?

3D transformacije se često kombinuju sa CSS animations, transitions i interaktivnim efektima.

Flip Kartica (Hover)

Preiđi mišem
Flip!
perspective: 1000px;
transition: transform 0.6s;
:hover { transform: rotateY(180deg); }

Kub - 3D Animacija

Prednja
Stražnja
Desna
Lijeva
Gornja
Donja
animation: rotateCube 8s infinite linear;

3D Nagnuta Kartica

Tilt Efekt
transform: perspective(600px) rotateX(10deg) rotateY(-15deg);